<template>
  <bm-overlay
    ref="customOverlay"
    :class="{sample: true, active}"
    pane="labelPane" 
    @draw="draw">
    <div @click="handleClick" class="chart_wrap" ref="chart_wrap"></div>
  </bm-overlay>
</template>

<script>
import BmOverlay from 'vue-baidu-map/components/overlays/Overlay'
import echarts from "echarts";
export default {
  components: {
    BmOverlay
  },
  props: {
    text: {
      type: String,
      default: 'www'
    },
    position: {
      type: Object,
      default: function() {
        return {lng: 116.404, lat: 39.915}
      }
    },
    active: {
      type: Boolean,
      default: true
    },
    color: {
      type: String,
      default: "#f43333"
    },
    recordId: {
      type: Number,
      default: 0
    },
    showEffectOn: {
      type: String,
      default: "emphasis"
    }
  },
  watch: {
    position: {
      handler () {
        this.$refs.customOverlay.reload()
      },
      deep: true
    },
    showEffectOn: {
      handler () {
        this.$refs.customOverlay.reload()
        if(this.chart) {
          // console.log('change' + this.showEffectOn)
          // console.log(this.option)
          // this.option.series[0].showEffectOn = this.showEffectOn //this.showEffectOn
          // this.chart.setOption(this.option)
          this.resizeChart()
        }
      },
      deep: true
    }
  },
  data() {
    return {
      chart: null,
      option: {}
    };
  },
  created() {
  },
  mounted() {
    this.resizeChart()
  },
  beforeDestroy() {},
  methods: {
     handleClick () {
      // global.alert('Well done.')
      this.$emit("handleChangeRecordPoint",this.recordId)
    },
    resizeChart(){
      const option = {
      grid:  {
        left: '5%',
        right: '5%',
        top: '35%',
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        data:  [1],
        show: false,
      }],
      yAxis: [{
        type: 'value',
        show: false,
      }],
      series: [
        {
          type: 'effectScatter',
          coordinateSystem: 'cartesian2d',
          data: [1], //2d坐标系
          color: [this.color],
          effectType: 'ripple',
          showEffectOn: this.showEffectOn,
          symbolSize: 15,
          rippleEffect: {
            brushType: 'fill',
            scale: 4
          },
          hoverAnimation: false,

          emphasis: {
            itemStyle: {
              color: this.color,
              shadowBlur: 20,
              shadowColor: '#333',
              borderWidth: '100',
              borderType: 'solid',
              boderColor: '#000',
            },
          },
          label: {
            show: false,
            position: 'top',
            distance: 20,
            fontFamily: 'pingfang sans-serif',
            formatter: (item) => {
              return ''
            }
          },
          zlevel: 1
        }
      ],
    };
    this.chart ? this.chart.dispose() : void 0;
    this.chart = echarts.init(this.$refs.chart_wrap);
		this.chart.setOption(option)
    },
    draw ({el, BMap, map}) {
      const {lng, lat} = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 45 + 'px'
    }
  }
};
</script>
<style lang="scss" scoped>
.sample {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: transparent;
  overflow: hidden;
  // box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
  z-index: 9999;
}
.chart_wrap{
  width: 100px;
  height: 100px;
}
.sample.active {
  // background: rgba(0,0,0,0.75);
  color: #fff;
}
</style>
<style lang="scss">
#originMapId{
  .BMap_mask + div {
    div:nth-child(4) {
      z-index: 8888 !important;
    }
  }
}
</style>
